<template>
  <a-modal v-model="visible"  title="编辑关键字"  @cancel='cancel' @ok='sure'>
    <div>
      <template v-for="(tag, index) in tags">
        <a-tooltip v-if="tag.length > 20" :key="tag.categoryId" :title="tag">
          <a-tag color="blue" :key="tag.categoryId" closable @close="() => handleClose(tag)">
            {{ `${tag.keyName.slice(0, 20)}...` }}
          </a-tag>
        </a-tooltip>
        <a-tag color="blue" v-else :key="tag.id" closable @close="() => handleClose(tag)">
          {{ tag.keyName }}
        </a-tag>
      </template>
      <a-input
        v-if="inputVisible"
        ref="input"
        type="text"
        size="small"
        :style="{ width: '78px' }"
        :value="inputValue"
        @change="handleInputChange"
        @blur="handleInputConfirm"
        @keyup.enter="handleInputConfirm"
      />
      <a-tag  style="background: #fff; borderStyle: dashed;" @click="showInput">
        <a-icon type="plus" /> 新增
      </a-tag>
    </div>
  </a-modal>
</template>

<script>
import EpaSortService from '@/myService/EpaSortService'


export default {
  name: 'EditKeyWordModal',
  data(){
    return{
      visible:false,
      tags: [],
      inputVisible: false,
      inputValue: '',
      categoryId:''
    }
  },
  methods:{
    sure(){
      this.cancel()
    },
    open(categoryId,keyWord){
      console.log(keyWord);
      this.categoryId=categoryId;
      this.tags=keyWord;
      this.visible=true;
    },
    cancel(){
      this.visible=false
      this.$emit('getPolluteCategoryList')
    },
    handleClose(removedTag) {
      let params={
        keyId:removedTag.keyId
      }
      this.tags.splice(this.tags.indexOf(removedTag), 1);
      EpaSortService.deleteCategoryKey(params).then((res)=>{
        console.log(res)
      })
      this.$emit('getPolluteCategoryList')
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(function() {
        this.$refs.input.focus();
      });
    },

    handleInputChange(e) {
      this.inputValue = e.target.value;
    },

    handleInputConfirm() {
      const inputValue = this.inputValue;
      if (inputValue) {
        let data={
          categoryId:this.categoryId,
          keyName:inputValue
        }
        console.log(data)
        EpaSortService.addCategoryKey(data).then((res)=>{
          console.log(res)
        })
        this.tags.push({
          categoryId:'',
          keyName:inputValue
        });
      }
      console.log(this.tags)
      this.inputVisible=false;
      this.inputValue='';
    },
  }
}
</script>

<style scoped>

</style>